<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- <div id="box">
      <h1>name</h1>
      <p>age</p>
      <h1>info</h1>
    </div> -->
    <script
      crossorigin
      src="https://unpkg.com/react@17.0.2/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"
    ></script>
    <!-- 引入babel, 让babel帮我们编译jsx -->
    <script src="./babel.min.js"></script>
    <!-- script标签添加type=text/babel 相当于告诉babel,这个script标签的内容需要编译 -->
    <script type="text/babel">
      //需求: 根据数据,动态创建一个div,渲染到页面上
      let obj = {
        name: 'hj',
        age: 43,
        info: 'lsp',
      }

      //   1. 利用jsx(javascript xml),理解为: 在js中写标签
      const div = (
        <div id="box">
          <h1>name</h1>
          <p>age</p>
          <h1>info</h1>
        </div>
      )

      //   2. 根据虚拟dom创建真实dom,渲染页面

      //   ReactDOM.render(要被渲染的虚拟dom, 真实DOM树的某个节点)
      ReactDOM.render(div, document.getElementById('root'))
    </script>
  </body>
</html>
